<template>
  <div class="scroll-view" ref="oScrollRef">
    <div class="list-item" v-for="item of listData" :key="item.id">
      {{ item.text }}
    </div>
    <div class="bottom-box" v-if="!noData">Loading more</div>
    <div class="bottom-box" v-if="noData">No more Data</div>
  </div>
</template>

<script>
export default {
  name: "MyList",

  data() {
    return {
      starIndex: 0,
      listData: [],
      loadingMore: true,
      noData: false,
    };
  },
  props: ["data", "pageCount"],
  mounted() {
    this.oScrollRef = this.$refs.oScrollRef;
    this.oScrollRef.addEventListener("scroll", this.loadMore, false);
    this.setListData();
  },

  methods: {
    loadMore() {
    //   console.log(this.oScrollRef);
      const oScroll = this.oScrollRef;
      const listHeight = oScroll.clientHeight,
        scrollHeight = oScroll.scrollHeight,
        scrollTop = oScroll.scrollTop;
        if(listHeight+scrollTop>=scrollHeight-10){
            this.setListData();
        }
    },
    setListData() {
      if (this.starIndex > this.data.length - 1) {
        this.noData = true;
        return;
      }
      this.listData.push(
        ...this.data.slice(this.starIndex, (this.starIndex += this.pageCount))
      );
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
}
.scroll-view {
  height: 812px;
  overflow: auto;
}
.bottom-box {
  height: 44px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  line-height: 44px;
}
.list-item {
  height: 200px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}
</style>